---
type: tutorial
title: 创建在线代码仓库
description: |-
  教程：搭建你的 Astro 博客 —
  为你的项目创建 GitHub 仓库
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - 将你的项目存储在线上
</PreCheck>

本教程将使用 GitHub 来存储我们的仓库并连接到 Web 主机。你也可以选择其他的在线 git 提供商。

:::note
如果你已经熟悉 git 并拥有自己的工作流程，请使用你喜欢的方法为你的项目创建一个新的 GitHub 仓库。跳到下一页：[将站点部署到网上](/zh-cn/tutorial/1-setup/5/)。
:::

## 在 GitHub 上创建一个仓库

尽管有几种方法可以将你的本地代码存储在 GitHub 中，但本教程将指导你完成一种不需要在命令行中使用 git 的方法。

<Steps>
1. 在浏览器中登录 GitHub.com，点击屏幕右上角的 <kbd>+</kbd> 新建一个代码仓库（Repository）。

2. 为你的仓库起一个名称。不必与你的项目文件夹同名。

3. 你将看到一些选项，但无需更改任何默认设置。向下滚动并单击按钮以 <kbd>Create Repository</kbd>（创建仓库）。

4. 你将看到各种后续的选项步骤，但你不需要更改其中的任何一个。记下仓库的地址 `URL`。现在可以不执行任何操作然后退出页面。
</Steps>

## 将本地代码提交到 GitHub

在上一节中，你对页面内容进行了更改。这意味着你的项目文件已更改，VS Code 应在 “源” 菜单 `Source Control` 图标顶部显示一个数字。这个源选项卡是你定期去更新 GitHub 上的文件的地方。

<Steps>
1. 单击 VS Code 中的 “源代码管理” 选项卡 `Source Control` 以查看已更改文件的列表。如果你看到需要安装 `git` 的消息，请按照提供的说明进行操作，然后重新加载 VS Code。

2. 单击提交消息上方的 <kbd>•••</kbd> “3个点” 的菜单并选择 <kbd>Remote</kbd> > <kbd>Add Remote</kbd>。

3. 选择 <kbd>Add remote from GitHub</kbd>。如有必要，请执行任何身份验证步骤，然后返回 VS Code 并重复此操作。

4. 你应该在 GitHub 上看到所有仓库的列表。选择你为此项目创建的那个。如果你没有看到你的项目，请直接粘贴其 GitHub URL。你可能还会被要求为该仓库指定一个本地名称。可以选择任何你喜欢的名称。

5. 在菜单窗格的顶部，将有一个地方可以输入**提交消息**`commit message`（你的文件更改的描述）。输入 `initial commit` 并按 <kbd>Commit</kbd> 按钮提交这些更改。

6. 你可能会看到一条消息，告诉你没有 “staged” 提交，并询问你是否要暂存它们。单击 <kbd>Always</kbd>（总是）并继续。

7. 最后，更改文件列表应替换为 <kbd>Publish</kbd> 按钮。单击此按钮将你提交的更改发送到 GitHub。
</Steps>

### 在 GitHub 上查看你的项目

要验证你的项目是否已成功存储在 GitHub 上，请访问 GitHub.com 并在你的账号下查看你的仓库列表。选择你创建的新文件，并确认它包含你的 Astro 项目文件。

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我把我的项目储存到了 GitHub 上。
</Checklist>
</Box>

### 相关资源

- <p>[在 VS Code 中使用 Git 源代码管理](https://code.visualstudio.com/docs/sourcecontrol/overview#_git-support) <Badge class="neutral-badge" text="外部链接" /></p>
